<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="../css/swiper-4.3.5.min.css">
    <link rel="stylesheet" href="../css/element.css">
    <link rel="stylesheet" href="../css/main.css">
    <link rel="stylesheet" href="../css/iconfont/iconfont.css">
    <link rel="stylesheet" href="../css/person_center/person_center.css">
    <title>会员中心-我的订单</title>
</head>

<body>
    <div id="app" v-cloak>
        <chat_room  v-show="chatRoom" :firm-im='firmIm' @forroom="showRoom"></chat_room>
        <headers></headers>
        <div class="search wrap">
            <logo></logo>
            <div class="header_tit fl"></div>
            <searchs></searchs>

            <car_box></car_box>

        </div>
        <div class="wrap person_center">
            <!-- nav -->
            <div class="nav_box fl">
                <div id="subapp" v-cloak>
                    <div class="person_nav fl">
                        <ul>
                            <li @click='person_order'>首页</li>
                            <li class="active">我的订单</li>
                            <li @click='person_address'>收货地址</li>
                            <li @click='person_exchange_page'>积分换货</li>
                            <li @click='person_integral'>积分订单</li>
                            <li @click='person_collection'>我的收藏</li>
                            <li @click='person_foot'>浏览足迹</li>
                            <li @click='person_ticket'>优惠券</li>
                            <li @click='person_info'>个人设置</li>
                            <li @click='person_message'>消息中心</li>
                        </ul>
                    </div>
                </div>
            </div>

            <div class="order_box fl">
                <div class="order_nav">
                    <ul>
                        <li v-for="(item,index) in tabsParam" @click="toggleTabs(item.index)" class="fl" :class="{active:item.index==nowIndex}">{{item.value}}</li>
                        <!-- <li class="fl">
                            全部订单
                        </li>
                        <li class="fl">
                            待付款
                        </li>
                        <li class="fl">
                            待发货
                        </li>
                        <li class="fl">
                            待收货
                        </li>
                        <li class="fl">
                            待评价
                        </li>
                        <li class="fl">
                            退换货
                        </li> -->
                    </ul>
                </div>

                <div class="my_order_tit">
                    <div class="product">商品</div>
                    <div class="one_money">单价</div>
                    <div class="num">数量</div>
                    <div class="do_someting">商品操作</div>
                    <div class="pay_money">实付款</div>
                    <div class="deal_active">交易状态</div>
                    <div class="deal_do">交易操作</div>
                </div>

                <div class="all_list">
                    <div class="all_item" v-for='(shop,index) in info_list'>
                        <div class="all_item_tit">
                            <div class="fl item_data">
                                {{shop.createTime}}
                            </div>
                            <div class="fl item_num">
                                <span>订单号：</span><span class="num_detail">{{shop.showOrderDetailsId}}</span>
                            </div>
                            <div class="fl item_name" @click='showRoom(showRoom,shop.merId)'>
                                <span class="fl">{{shop.merName}}</span> <img src="../images/icon_kefu_0.png" alt=""
                                    class="kefu">
                            </div>

                            <div class="del fr cursor" v-if="shop.status==4||shop.status==7">
                                <img src="../images/icon_del_0.png" alt="" @click='dmo(shop.orderDetailsId)'>
                            </div>
                            <div class="deal_do fr">
                                <span class="cursor" v-if="shop.status==1" @click='coo(shop.orderDetailsId)'>取消订单</span>
                                <span class="pay_btn cursor" v-if="shop.status==1" @click='submit_order(shop.orderDetailsId)'>付款</span>
                            </div>
                        </div>
                        <div class="item_detail" v-for='(item,index) in shop.goodsList'>
                            <div class="mtop">
                                <div class="products fl">
                                    <div class="detail_img fl" @click='order_page(item.id,item.activitiesType)'>
                                        <img :src="item.goodsImgs" alt="">
                                    </div>
                                    <div class="detail_tit fl">{{item.goodsName}}</div>
                                </div>
                                <div class="one_money fl">
                                    ￥{{item.goodsUnitPrice}}
                                </div>
                                <div class="num fl">{{item.goodsQuantity}}</div>
                                <div class="do_someting fl">
                                    <p>&nbsp; </p>
                                    <p class="cursor" v-if="item.orderStatus==4&&item.isAbnormal==0" @click='exchange_goods(item.id)'>退换货</p>
                                    <!-- <p  v-if="shop.status==4">投诉</p> -->
                                    <p class="cursor" v-if="item.orderStatus==4&&item.orderStatus==0||evlaueattext" @click='evaluate(item.goodsId,item.id)'>评价</p>
                                </div>
                                <div class="pay_money fl">
                                    <p>应付</p>
                                    <p class="red_color">￥{{item.goodsTotalPrice+item.dispatchPrice}}</p>
                                    <p>含运费：￥{{item.dispatchPrice}}</p>
                                </div>
                                <div class="deal_active fl">
                                    <p class="red_color" v-if="item.orderStatus==-1">交易关闭</p>
                                    <p class="red_color" v-else-if="item.orderStatus==1">待付款</p>
                                    <p class="red_color" v-else-if="item.orderStatus==2">待发货</p>
                                    <p class="red_color" v-else-if="item.orderStatus==3">待收货</p>
                                    <p class="red_color" v-else-if="item.orderStatus==4&&item.isAbnormal==0&&item.solveAbnormal==null">交易成功</p>
                                    <p class="red_color" v-else-if="item.orderStatus==4&&item.isAbnormal==1">退换货待审核</p>
                                    <p class="red_color" v-else-if="item.orderStatus==4&&item.solveAbnormal==0&&item.isAbnormal==0">退换货成功</p>
                                    <p class="red_color" v-else-if="item.orderStatus==4&&item.isAbnormal==0&&item.solveAbnormal==1">退换货失败</p>
                                    <p class="red_color" v-else-if="item.orderStatus==5">订单异常</p>
                                    <p class="red_color" v-else-if="item.orderStatus==6">活动订单</p>
                                    <p class="red_color" v-else-if="item.orderStatus==7">订单完成</p>
                                    <p @click='order_page(item.id,item.activitiesType)' class="cursor">交易详情</p>
                                </div>
                                <div class="deal_do fl">
                                    <p class="pay_btn cursor" v-if="item.orderStatus==3" @click='get_goods(item.id)'>确认收货</p>
                                    <!-- <p class="pay_btn" v-if="shop.status==3">确认收货</p> -->
                                    <!-- <span>取消订单</span> -->
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="integral_page search_integral_page fr">
                        <el-pagination background layout="prev, pager, next" @current-change="handleCurrentChange"
                            :page-size='10' :total="total" class="page_list">
                        </el-pagination>
                    </div>
                </div>
            </div>

        </div>

        <div id="form_sumbit" style="display: none"></div>





        <div class="wrap clear_both">
            <productfooter></productfooter>
        </div>
    </div>
    <script src="https://cdn.ronghub.com/RongIMLib-2.3.3.min.js"></script>
    <script src="https://cdn.ronghub.com/RongEmoji-2.2.7.min.js"></script>
    <script src="../js/axios.js"></script>
    <script src="../js/qs.js"></script>
    <script src="../js/swiper-4.3.5.min.js"></script>
    <script src="../js/browser.min.js"></script>
    <script src="../js/vue.js"></script>
    <script src="../js/element.js"></script>
    <script src='../chatroom/chatroom.js'></script>
    <script src="../js/main.js"></script>
    <script type="text/babel">
    RongIMLib.RongIMEmoji.init();
    var mylist = RongIMLib.RongIMEmoji.list;
    for (let n = 0; n < mylist.length; n++) {
      mylist[n].node = RongIMLib.RongIMEmoji.emojiToHTML(mylist[n].emoji);
    }
    RongIMLib.RongIMEmoji.list = mylist;
        var app = new Vue({
            el: '#app',
            data() {
                return {
                    tabsParam:[{
                        value:'全部订单',
                        index:0
                    },{
                        value:'待付款',
                        index:1
                    },{
                        value:'待发货',
                        index:2
                    },{
                        value:'待收货',
                        index:3
                    },{
                        value:'待评价',
                        index:4
                    },{
                        value:'退换货',
                        index:5
                    },{
                        value:'订单完成',
                        index:7
                    }],
                    nowIndex:0,
                    info_list:'',
                    total:'',
                    evlaueattext:false,
                    chatRoom:false,
                    firmIm:''
                };
            },
            created() {
                
            },
            mounted() {
                console.log(this.GetQueryString().index)
                if (this.GetQueryString().index==''||this.GetQueryString().index=='undefined'||this.GetQueryString().index=='null') {
                    this.nowIndex = 0
                }else{
                    this.nowIndex = this.GetQueryString().index
                }
                this.mOL(this.nowIndex,1)
            },
            methods: {
                // 融云
                showRoom(chatRoom,id){
                    app.chatRoom=chatRoom
                    axios({
                        method:"POST",
                        url:base_url + "/shopUser/getShopUserInfo",
                        data:Qs.stringify({
                            shopId:id
                        }),
                        headers:{
                            'Content-Type':'application/x-www-form-urlencoded',
                            "TOKEN":localStorage.getItem('wACCESS_TOKEN')
                        }
                    })
                    .then(function (res) {
                        app.firmIm = res.data.data.shopUserId
                        console.log(app.firmIm)
                    })
                    .catch(function (error) {
                    });
                },
                GetQueryString() {
                    var obj = new Object()
                    var scan_url = window.location.href.split('?')[1];
                    var strs = scan_url.split('&');
                    for(var x in strs) {
                        var arr = strs[x].split('=');
                        obj[arr[0]] = arr[1]
                    }
                    return obj
                },
                handleCurrentChange(value){
                    this.mOL(this.nowIndex,value)
                },
                // 退换货
                exchange_goods(id){
                    window.location.href='../product/exchange_goods.html?listid='+id
                },
                // 确认后货
                get_goods(id){
                    axios({
                        method:"POST",
                        url:base_url + "/uo/crg",
                        data:Qs.stringify({
                            orderGoodsId:id
                        }),
                        headers:{
                            
                            'Content-Type':'application/x-www-form-urlencoded',
                            "TOKEN":localStorage.getItem('wACCESS_TOKEN')
                        }
                    })
                    .then(function (res) {
                        app.mOL(app.nowIndex,1)
                    })
                    .catch(function (error) {
                    });
                },
                order_page(id,style){
                    if (style==0||style==3) {
                        // alert('普通商品||秒杀'+style)
                        window.location.href='ordinary_order_detail.html?id='+id
                    }else if (style==1) {
                        // alert('团购商品'+style)
                        window.location.href='group_order_detail.html?id='+id
                    }else if (style==2) {
                        // alert('周期购'+style)
                        window.location.href='cyc_order_detail.html?id='+id
                    }
                },
                // 跳转评价页面
                evaluate(goodsId,listid){
                    window.location.href='person_evaluate.html?id='+goodsId+'&listid='+listid
                },
                // 去付款
                submit_order(id){
                    axios({
                        method:"POST",
                        url:base_url + "/uo/pood",
                        data:Qs.stringify({
                            detailsId:id
                        }),
                        headers:{
                            'loginType':0,
                            'Content-Type':'application/x-www-form-urlencoded',
                            "TOKEN":localStorage.getItem('wACCESS_TOKEN')
                        }
                    })
                    .then(function (res) {
                        console.log(res)
                        let payInfo=res.data.data.result.split('<script>')[0]
                        document.getElementById('form_sumbit').innerHTML=payInfo
                        setTimeout(() => {
                            document.forms[0].submit();
                        }, 100);
                    })
                    .catch(function (error) {
                    });
                },
                // 跳转交易详情
                order_detail(){
                    window.location.href='person_order_detail.html'
                },
                // 取消订单
                dmo(id){
                    this.$confirm('是否删除订单', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                    }).then(() => {
                        axios({
                        method:"POST",
                        url:base_url + "/uo/dmo",
                        data:Qs.stringify({
                            orderId:id,
                        }),
                        headers:{
                            'Content-Type':'application/x-www-form-urlencoded',
                            "TOKEN":localStorage.getItem('wACCESS_TOKEN')
                        }
                    })
                    .then(function (res) {
                        if (res.data.code == 1) {
                            app.mOL(0,1)
                            this.$message({
                                type: 'success',
                                message: '删除成功!'
                            });
                        }
                    })
                    .catch(function (error) {
                        console.log(error);
                    });
                    
                    }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });          
                    });
                   
                },
                coo(id){
                    axios({
                        method:"POST",
                        url:base_url + "/uo/coo",
                        data:Qs.stringify({
                            orderId:id,
                        }),
                        headers:{
                            'Content-Type':'application/x-www-form-urlencoded',
                            "TOKEN":localStorage.getItem('wACCESS_TOKEN')
                        }
                    })
                    .then(function (res) {
                        if (res.data.code == 1) {
                            app.mOL(0,1)
                        }
                    })
                    .catch(function (error) {
                        console.log(error);
                    });
                },
                // 获取订单列表
                
                mOL(orderStatus,page){
                    axios({
                        method:"POST",
                        url:base_url + "/uo/mOL",
                        data:Qs.stringify({
                            pageSize:10,
                            pageNum:page,
                            orderStatus:orderStatus,
                            queryDate:0
                        }),
                        headers:{
                            'Content-Type':'application/x-www-form-urlencoded',
                            "TOKEN":localStorage.getItem('wACCESS_TOKEN')
                        }
                    })
                    .then(function (res) {
                        if (res.data.code == 1) {
                            console.log(res.data.data.info.list)
                            app.info_list = res.data.data.info.list
                            app.total = res.data.data.info.total
                        }
                    })
                    .catch(function (error) {
                        console.log(error);
                    });
                },


                // 显示购物车               
                go_shop_car(){                     
                    window.location.href='../product/shop_car.html'  
                },
                person_order(){
                    window.location.href='person_order.html'
                },
                person_address(){
                    window.location.href='person_address.html'
                },
                person_exchange_page(){
                    window.location.href='person_exchange_page.html'
                },
                person_integral(){
                    window.location.href='person_integral_order.html'
                },
                person_collection(){
                    window.location.href='person_collection.html'
                },
                person_foot(){
                    window.location.href='person_footprint.html'
                },
                person_info(){
                    window.location.href='person_info.html'
                },
                person_message(){
                    window.location.href='person_message.html'
                },
                person_ticket(){
                    window.location.href='person_ticket.html'
                },


                toggleTabs(index){
                    this.mOL(index,1)
                    this.nowIndex = index
                    if (index==4) {
                        app.evlaueattext = true
                    }else{
                        app.evlaueattext = false
                    }
                }
            }
        })
    </script>
</body>

</html>